<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>签到列表 - 农业银行</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            color: #333;
        }
        .container {
            width: 80%;
            max-width: 1200px;
            margin: 50px auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            margin-bottom: 20px;
            color: #008f47; /* 农业银行绿色 */
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        table, th, td {
            border: 1px solid #ddd;
        }
        th, td {
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
            color: #008f47; /* 农业银行绿色 */
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #f1f1f1;
        }
        .button-container {
            text-align: center;
            margin-bottom: 20px;
        }
        .export-button, .page-button {
            background-color: #008f47;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin: 0 5px;
        }
        .pagination {
            text-align: center;
            margin-top: 20px;
        }
        .pagination span {
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>签到列表</h1>
        <div class="button-container">
            <button class="export-button" onclick="exportData()">导出数据</button>
        </div>
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" id="select-all" onclick="toggleSelectAll()"></th>
                    <th>姓名</th>
                    <th>手机号</th>
                    <th>签到时间</th>
                </tr>
            </thead>
            <tbody id="records-table-body">
                <!-- Records will be added here dynamically -->
            </tbody>
        </table>
        <div class="pagination">
            <button class="page-button" id="prev-page" onclick="changePage('prev')">上一页</button>
            <span id="page-info">第 1 页</span>
            <button class="page-button" id="next-page" onclick="changePage('next')">下一页</button>
        </div>
    </div>

    <script>
        let currentPage = 1;
        const perPage = 10;

        function fetchData(page) {
            fetch(`http://127.0.0.1:5000/checkins?page=${page}&per_page=${perPage}`)
                .then(response => response.json())
                .then(data => {
                    updateTable(data.checkins);
                    updatePageInfo(data.current_page, data.pages);
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });
        }

        function updateTable(data) {
            const tableBody = document.getElementById('records-table-body');
            tableBody.innerHTML = '';

            data.forEach(record => {
                const newRow = document.createElement('tr');

                const selectCell = document.createElement('td');
                const selectCheckbox = document.createElement('input');
                selectCheckbox.type = 'checkbox';
                selectCell.appendChild(selectCheckbox);
                newRow.appendChild(selectCell);

                const nameCell = document.createElement('td');
                nameCell.textContent = record.name;
                newRow.appendChild(nameCell);

                const phoneCell = document.createElement('td');
                phoneCell.textContent = record.phone;
                newRow.appendChild(phoneCell);

                const checkinTimeCell = document.createElement('td');
                checkinTimeCell.textContent = new Date(record.checkinTime).toLocaleString();
                newRow.appendChild(checkinTimeCell);

                tableBody.appendChild(newRow);
            });
        }

        function updatePageInfo(currentPage, totalPages) {
            document.getElementById('page-info').textContent = `第 ${currentPage} 页`;
            document.getElementById('prev-page').disabled = currentPage === 1;
            document.getElementById('next-page').disabled = currentPage === totalPages;
        }

        function changePage(direction) {
            if (direction === 'prev' && currentPage > 1) {
                currentPage--;
                fetchData(currentPage);
            } else if (direction === 'next') {
                currentPage++;
                fetchData(currentPage);
            }
        }

        function toggleSelectAll() {
            const isChecked = document.getElementById('select-all').checked;
            document.querySelectorAll('#records-table-body input[type="checkbox"]').forEach(checkbox => {
                checkbox.checked = isChecked;
            });
        }

        function exportData() {
            const tableHeader = Array.from(document.querySelectorAll('thead th:not(:first-child)'))
                .map(th => th.textContent)
                .join(',');

            const rows = document.querySelectorAll('#records-table-body tr');
            const csvContent = [tableHeader]; // Start with header row

            let hasSelectedRows = false;

            rows.forEach(row => {
                const checkbox = row.querySelector('input[type="checkbox"]');
                const cells = row.querySelectorAll('td:not(:first-child)');
                if (checkbox.checked) {
                    hasSelectedRows = true;
                    const rowContent = Array.from(cells).map(cell => `"${cell.textContent}"`).join(',');
                    csvContent.push(rowContent);
                }
            });

            // If no rows selected, export all rows
            if (!hasSelectedRows) {
                rows.forEach(row => {
                    const cells = row.querySelectorAll('td:not(:first-child)');
                    const rowContent = Array.from(cells).map(cell => `"${cell.textContent}"`).join(',');
                    csvContent.push(rowContent);
                });
            }

            const blob = new Blob([csvContent.join('\n')], { type: 'text/csv;charset=utf-8;' });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = 'checkin_list.csv';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }

        // 初次加载第一页数据
        fetchData(currentPage);
    </script>
</body>
</html>
